<!--   @author  Created By  YS  on 2023/11/2 -->
<!--   @describe -->

<template>
  <div class="body">
    <template v-if="pageType == 'test'">
      <div class="title-h1">
        修改手机号
      </div>
      <div class="title-h3">
        将向您的绑定手机发送验证码以验证身份
      </div>
      <div class="title-h1">
        138****5678
      </div>
      <view class="input-box margin-button-90">
        <input type="text" value=""  class="input-phone" placeholder="请输入验证码"/>
        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
        <span  @click="getCode" class="input-btn">{{ tips }} </span>
      </view>
      <cBtn text="下一步" :customStyle="{marginTop:'50rpx'}" @click="next"></cBtn>
    </template>
    <template v-if="pageType == 'confirm'">
      <div class="title-h1">
        修改手机号
      </div>
<!--      <div class="title-h3">-->
<!--        将向您的绑定手机发送验证码以验证身份-->
<!--      </div>-->
      <view class="input-box">
        <span>+86</span> <input type="text" value=""  class="input-phone" placeholder="请输入新手机号"/>
      </view>
      <view class="input-box margin-button-90">
        <input type="text" value=""  class="input-phone" placeholder="请输入验证码"/>
        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
        <span  @click="getCode" class="input-btn">{{ tips }} </span>
      </view>
      <cBtn text="确定" :customStyle="{marginTop:'50rpx'}" @click="finish"></cBtn>
    </template>
  </div>
</template>

<script>
import cBtn from '../../components/cBtn'
export default {
  name: 'changePwd',
  components:{
    cBtn
  },
  data() {
    return {
      pageType:'confirm',
      seconds: 10,
      tips:''
    }
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      uni.$u.toast('倒计时结束');
    },
    start() {
      uni.$u.toast('倒计时开始');
    },
    next(){
      this.pageType = 'confirm'
    },
    finish(){
      console.log(123);
      uni.chooseImage(
          {
            count: 6, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera'], //从相册选择
            success: function (res) {
              console.log(JSON.stringify(res.tempFilePaths));
            },
            fail:function (res) {
              console.log(res);
              console.log(123);
            }
          }
      )
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/css/base.scss';
.body {
  padding-top: 1rpx;
}
</style>
